<template>
  <div class="template-content">
  <div id="devicePlayer" ref="devicePlayer">  <!-- v-loading="isLoging">-->
    <Modal v-model="playModal"  title="视频播放"  @on-ok="addOk"  @on-cancel="cancel" width="900px" :mask-closable="false" :closable="true">
      <div style="width:800px; height: 500px;">
        <div style="width:100%; height: 100%;">
          <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :height="false" :hasAudio="hasAudio" fluent autoplay live ></player>
        </div>
      </div>
    </Modal>
  </div>
  </div>
</template>
<script>
import player from './Jessibuca_new.vue'
import {playStop} from '@/api/Apiproxy';
export default {
  name: 'devicePlayer',
  components: {player},
  data(){
    return {
      playModal:false,
      deviceInfo:{
        gbServerId:null,
        deviceId:null,
        channelId:null
      },
      hasAudio:false,
      isLoging:false,
      videoUrl: '',
      streamId:'',
      app:'',
      mediaServerId:'',
      coverPlaying:false,
      showVideoDialog: false,
    }
  },
  methods:{
    addOk(){this.stopDevicePush();},
    cancel(){this.stopDevicePush();},
    stopDevicePush: function () {
      //var that = this;
      this.close();
      /*      playStop(this.deviceInfo.gbServerId,this.deviceInfo.deviceId,this.deviceInfo.channelId).then(res=>{
        console.log(res);
      })*/
      this.playModal = false;
    },
    openDialog: function (tab, gbServerId,deviceId, channelId, param) {
      this.deviceInfo = {gbServerId: gbServerId,deviceId: deviceId,channelId: deviceId};
      /** !! 表示 非null 非underfined 非'' */
      if (!!this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause();
      }
      //console.log("openDialog");
      this.play(param.streamInfo, param.hasAudio);
    },
    /** play */
    play: function (streamInfo, hasAudio) {
      console.log("DevicePlayer.play():streamInfo=",streamInfo);
      this.hasAudio = hasAudio;
      this.isLoging = false;

      this.videoUrl = this.getUrlByStreamInfo(streamInfo);
      this.streamId = streamInfo.streamId;
      this.app = streamInfo.app;
      this.mediaServerId = streamInfo.mediaServerId;
      //this.playFromUrl(false, this.videoUrl);
      //console.log("DevicePlayer.playFromUrl(): %O",vUrl);

      this.hasaudio = this.hasaudio && this.hasaudio;
      this.$refs.videoPlayer.play(this.videoUrl);
      this.playModal = true;

    },
    getUrlByStreamInfo(streamInfo){

      let baseZlmApi = process.env.NODE_ENV === 'development'?`${location.host}/debug/zlm`:`${location.host}/zlm`
      if (location.protocol === "https:") {
        if (streamInfo.wss_flv === null) {
          this.$message({
            showClose: true,
            message: '媒体服务器未配置ssl端口',
            type: 'error'
          });
        }else {
          return streamInfo.wss_flv;
        }
      }else {
        return streamInfo.ws_flv;
      }
    },
/*    playFromUrl: function (realHasAudio, vUrl) {
      console.log("DevicePlayer.playFromUrl(): %O",vUrl);
      this.playModal = true;
      this.hasaudio = realHasAudio && this.hasaudio;
      this.$refs.videoPlayer.play(vUrl);
    },*/
    close: function () {
      console.log('关闭视频');
      if (!!this.$refs.videoPlayer){
        this.$refs.videoPlayer.pause();
      }
      this.videoUrl = '';
      this.coverPlaying = false;
      this.playModal = false;
/*      if (this.convertKey != '') {
        this.convertStop();
      }
      this.convertKey = ''
      if (this.recordPlay != '') {
        this.stopPlayRecord();
      }
      this.recordPlay = ''*/
    },
    //////////////////////播放器事件处理//////////////////////////
    videoError: function (e) {
      console.log("播放器错误：" + JSON.stringify(e));
    },
  }
}
</script>
<style lang="less">
@import ".././template";
</style>
